<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NexusOS - 下一代智能操作系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6366f1', // 主色调：靛蓝色
                        secondary: '#10b981', // 辅助色：绿色
                        accent: '#f59e0b', // 强调色：琥珀色
                        dark: '#1e293b',
                        light: '#f8fafc'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.15);
            }
            .star-active {
                color: #f59e0b;
            }
            .scroll-indicator {
                height: 3px;
                background-color: theme('colors.primary');
                position: fixed;
                top: 0;
                left: 0;
                z-index: 9999;
                width: 0%;
            }
        }
    </style>
</head>
<body class="bg-light text-dark font-sans">
    <!-- 滚动进度指示器 -->
    <div class="scroll-indicator" id="scrollIndicator"></div>

    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
                    <i class="fa fa-cube text-white text-xl"></i>
                </div>
                <span class="text-xl font-bold bg-gradient-to-r from-primary to-secondary text-gradient">NexusOS</span>
            </div>
            <nav class="hidden md:flex space-x-8">
                <a href="#features" class="text-dark/80 hover:text-primary transition-colors">特色</a>
                <a href="#screenshots" class="text-dark/80 hover:text-primary transition-colors">截图</a>
                <a href="#videos" class="text-dark/80 hover:text-primary transition-colors">视频</a>
                <a href="#news" class="text-dark/80 hover:text-primary transition-colors">资讯</a>
                <a href="#community" class="text-dark/80 hover:text-primary transition-colors">社区</a>
            </nav>
            <div class="flex items-center space-x-3">
                <a href="#register" class="hidden md:inline-block text-primary border border-primary px-4 py-2 rounded-lg hover:bg-primary/5 transition-colors">注册</a>
                <a href="#download" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors">下载</a>
                <button class="md:hidden text-dark text-xl">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
    </header>

    <main>
        <!-- 1. 英雄区 -->
        <section id="hero" class="relative bg-gradient-to-br from-dark to-dark/90 text-white overflow-hidden">
            <div class="absolute inset-0 opacity-20">
                <div class="absolute inset-0 bg-[url('https://picsum.photos/id/1/1920/1080')] bg-cover bg-center"></div>
                <div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent"></div>
            </div>
            <div class="container mx-auto px-4 py-24 md:py-32 relative z-10">
                <div class="max-w-3xl">
                    <span class="inline-block px-3 py-1 bg-primary/20 text-primary border border-primary/30 rounded-full text-sm font-medium mb-6">
                        2024年全新发布
                    </span>
                    <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight text-shadow">
                        重新定义智能<br>
                        <span class="bg-gradient-to-r from-primary to-secondary text-gradient">操作系统体验</span>
                    </h1>
                    <p class="text-lg md:text-xl text-white/80 mb-8 max-w-2xl">
                        NexusOS 融合人工智能与无缝协作，为专业人士打造高效、安全、智能的工作环境，让创意与生产力完美结合。
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="#download" class="bg-primary hover:bg-primary/90 text-white px-8 py-4 rounded-xl font-medium text-center transition-all shadow-lg shadow-primary/20">
                            <i class="fa fa-download mr-2"></i>立即下载
                        </a>
                        <a href="#features" class="bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white border border-white/30 px-8 py-4 rounded-xl font-medium text-center transition-all">
                            了解更多 <i class="fa fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                    <div class="mt-12 flex items-center space-x-6">
                        <div class="flex -space-x-2">
                            <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-dark">
                            <img src="https://picsum.photos/id/65/100/100" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-dark">
                            <img src="https://picsum.photos/id/66/100/100" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-dark">
                            <img src="https://picsum.photos/id/67/100/100" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-dark">
                            <div class="w-10 h-10 rounded-full border-2 border-dark bg-primary/20 flex items-center justify-center text-xs font-medium">
                                10k+
                            </div>
                        </div>
                        <div>
                            <div class="flex items-center mb-1">
                                <i class="fa fa-star star-active"></i>
                                <i class="fa fa-star star-active"></i>
                                <i class="fa fa-star star-active"></i>
                                <i class="fa fa-star star-active"></i>
                                <i class="fa fa-star-half-o star-active"></i>
                                <span class="ml-2 text-sm font-medium">4.8/5</span>
                            </div>
                            <p class="text-xs text-white/60">来自 2,356 位用户的评价</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-light to-transparent"></div>
        </section>

        <!-- 2. 软件/游戏特色 -->
        <section id="features" class="py-20 bg-light">
            <div class="container mx-auto px-4">
                <div class="text-center max-w-3xl mx-auto mb-16">
                    <span class="inline-block px-3 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">核心优势</span>
                    <h2 class="text-3xl md:text-4xl font-bold mb-6">重新想象你的工作方式</h2>
                    <p class="text-dark/70 text-lg">NexusOS 带来革命性的功能体验，让复杂的工作流程变得简单高效</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <!-- 特色1 -->
                    <div class="bg-white p-8 rounded-2xl shadow-sm card-hover">
                        <div class="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center text-primary text-2xl mb-6">
                            <i class="fa fa-bolt"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">AI 智能助手</h3>
                        <p class="text-dark/70">内置智能助手可理解自然语言指令，自动完成文档摘要、邮件分类、日程安排等任务，学习你的工作习惯，越用越懂你。</p>
                    </div>

                    <!-- 特色2 -->
                    <div class="bg-white p-8 rounded-2xl shadow-sm card-hover">
                        <div class="w-14 h-14 rounded-xl bg-secondary/10 flex items-center justify-center text-secondary text-2xl mb-6">
                            <i class="fa fa-shield"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">银行级安全防护</h3>
                        <p class="text-dark/70">采用端到端加密技术，生物识别认证，实时威胁检测，保护你的数据安全，让敏感信息远离风险。</p>
                    </div>

                    <!-- 特色3 -->
                    <div class="bg-white p-8 rounded-2xl shadow-sm card-hover">
                        <div class="w-14 h-14 rounded-xl bg-accent/10 flex items-center justify-center text-accent text-2xl mb-6">
                            <i class="fa fa-sync"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">多设备无缝协作</h3>
                        <p class="text-dark/70">在电脑、平板和手机间自由切换，工作状态实时同步，支持跨设备文件拖放，让你随时随地保持高效。</p>
                    </div>

                    <!-- 特色4 -->
                    <div class="bg-white p-8 rounded-2xl shadow-sm card-hover">
                        <div class="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center text-primary text-2xl mb-6">
                            <i class="fa fa-tachometer"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">性能优化引擎</h3>
                        <p class="text-dark/70">智能资源分配，自动清理冗余进程，即使运行多个大型应用也能保持流畅体验，开机速度提升40%。</p>
                    </div>

                    <!-- 特色5 -->
                    <div class="bg-white p-8 rounded-2xl shadow-sm card-hover">
                        <div class="w-14 h-14 rounded-xl bg-secondary/10 flex items-center justify-center text-secondary text-2xl mb-6">
                            <i class="fa fa-paint-brush"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">个性化界面</h3>
                        <p class="text-dark/70">支持深度定制的用户界面，动态主题随时间和环境变化，数百种布局组合满足你的审美需求。</p>
                    </div>

                    <!-- 特色6 -->
                    <div class="bg-white p-8 rounded-2xl shadow-sm card-hover">
                        <div class="w-14 h-14 rounded-xl bg-accent/10 flex items-center justify-center text-accent text-2xl mb-6">
                            <i class="fa fa-plug"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">开放式生态系统</h3>
                        <p class="text-dark/70">兼容主流软件和开发工具，支持第三方插件扩展，开发者可通过开放API打造专属功能。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 3. 功能/角色 -->
        <section id="characters" class="py-20 bg-white">
            <div class="container mx-auto px-4">
                <div class="text-center max-w-3xl mx-auto mb-16">
                    <span class="inline-block px-3 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">核心功能</span>
                    <h2 class="text-3xl md:text-4xl font-bold mb-6">强大功能，简单操作</h2>
                    <p class="text-dark/70 text-lg">精心设计的功能模块，满足不同场景下的工作需求</p>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-20">
                    <div>
                        <h3 class="text-2xl font-bold mb-6 flex items-center">
                            <span class="w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3">1</span>
                            智能工作空间
                        </h3>
                        <p class="text-dark/70 mb-4">根据你的工作习惯自动组织应用和文件，常用工具一键访问，减少寻找资源的时间。</p>
                        <ul class="space-y-3">
                            <li class="flex items-start">
                                <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                                <span>基于AI的内容推荐系统</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                                <span>上下文感知的工作流建议</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                                <span>自动整理的数字工作台</span>
                            </li>
                        </ul>
                    </div>
                    <div class="rounded-2xl overflow-hidden shadow-xl">
                        <img src="https://picsum.photos/id/2/800/500" alt="智能工作空间界面" class="w-full h-auto">
                    </div>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-20 lg:flex-row-reverse">
                    <div>
                        <h3 class="text-2xl font-bold mb-6 flex items-center">
                            <span class="w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3">2</span>
                            协作中心
                        </h3>
                        <p class="text-dark/70 mb-4">无缝的团队协作体验，实时编辑、评论和反馈，让团队成员保持同步，提升协作效率。</p>
                        <ul class="space-y-3">
                            <li class="flex items-start">
                                <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                                <span>多人实时文档协作</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                                <span>内置视频会议与屏幕共享</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                                <span>任务分配与进度追踪</span>
                            </li>
                        </ul>
                    </div>
                    <div class="rounded-2xl overflow-hidden shadow-xl">
                        <img src="https://picsum.photos/id/3/800/500" alt="协作中心界面" class="w-full h-auto">
                    </div>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                    <div>
                        <h3 class="text-2xl font-bold mb-6 flex items-center">
                            <span class="w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3">3</span>
                            数据智能分析
                        </h3>
                        <p class="text-dark/70 mb-4">将复杂数据转化为直观图表和可行见解，帮助你做出更明智的决策，发现隐藏机会。</p>
                        <ul class="space-y-3">
                            <li class="flex items-start">
                                <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                                <span>自定义数据仪表盘</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                                <span>预测性分析与趋势洞察</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                                <span>一键生成专业报告</span>
                            </li>
                        </ul>
                    </div>
                    <div class="rounded-2xl overflow-hidden shadow-xl">
                        <img src="https://picsum.photos/id/4/800/500" alt="数据智能分析界面" class="w-full h-auto">
                    </div>
                </div>
            </div>
        </section>

        <!-- 4. 游戏/软件截图 -->
        <section id="screenshots" class="py-20 bg-light">
            <div class="container mx-auto px-4">
                <div class="text-center max-w-3xl mx-auto mb-16">
                    <span class="inline-block px-3 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">界面展示</span>
                    <h2 class="text-3xl md:text-4xl font-bold mb-6">探索 NexusOS 的每个细节</h2>
                    <p class="text-dark/70 text-lg">精心设计的界面，兼顾美观与实用，让每一次操作都成为享受</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <div class="rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow cursor-pointer group">
                        <img src="https://picsum.photos/id/11/600/400" alt="NexusOS 桌面界面" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500">
                        <div class="p-4 bg-white">
                            <h3 class="font-semibold">智能桌面</h3>
                            <p class="text-sm text-dark/60">自适应布局，智能整理</p>
                        </div>
                    </div>
                    <div class="rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow cursor-pointer group">
                        <img src="https://picsum.photos/id/12/600/400" alt="NexusOS 应用中心" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500">
                        <div class="p-4 bg-white">
                            <h3 class="font-semibold">应用中心</h3>
                            <p class="text-sm text-dark/60">精选应用，一键安装</p>
                        </div>
                    </div>
                    <div class="rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow cursor-pointer group">
                        <img src="https://picsum.photos/id/13/600/400" alt="NexusOS 控制面板" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500">
                        <div class="p-4 bg-white">
                            <h3 class="font-semibold">控制面板</h3>
                            <p class="text-sm text-dark/60">简洁直观，功能强大</p>
                        </div>
                    </div>
                    <div class="rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow cursor-pointer group">
                        <img src="https://picsum.photos/id/14/600/400" alt="NexusOS 文档中心" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500">
                        <div class="p-4 bg-white">
                            <h3 class="font-semibold">文档中心</h3>
                            <p class="text-sm text-dark/60">智能管理，轻松协作</p>
                        </div>
                    </div>
                    <div class="rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow cursor-pointer group">
                        <img src="https://picsum.photos/id/15/600/400" alt="NexusOS 任务管理器" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500">
                        <div class="p-4 bg-white">
                            <h3 class="font-semibold">任务管理器</h3>
                            <p class="text-sm text-dark/60">高效管理，一目了然</p>
                        </div>
                    </div>
                    <div class="rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow cursor-pointer group">
                        <img src="https://picsum.photos/id/16/600/400" alt="NexusOS 系统设置" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500">
                        <div class="p-4 bg-white">
                            <h3 class="font-semibold">系统设置</h3>
                            <p class="text-sm text-dark/60">深度定制，个性体验</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 5. 游戏/软件视频 -->
        <section id="videos" class="py-20 bg-white">
            <div class="container mx-auto px-4">
                <div class="text-center max-w-3xl mx-auto mb-16">
                    <span class="inline-block px-3 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">视频演示</span>
                    <h2 class="text-3xl md:text-4xl font-bold mb-6">亲眼见证 NexusOS 的强大</h2>
                    <p class="text-dark/70 text-lg">观看视频，了解 NexusOS 如何改变你的工作方式</p>
                </div>

                <div class="max-w-4xl mx-auto rounded-2xl overflow-hidden shadow-xl relative mb-12">
                    <img src="https://picsum.photos/id/9/1200/675" alt="NexusOS 功能演示视频封面" class="w-full h-auto">
                    <div class="absolute inset-0 flex items-center justify-center">
                        <button class="w-20 h-20 rounded-full bg-primary/90 text-white flex items-center justify-center hover:bg-primary transition-colors shadow-lg transform hover:scale-105 transition-transform">
                            <i class="fa fa-play text-2xl ml-1"></i>
                        </button>
                    </div>
                    <div class="absolute bottom-4 right-4 bg-black/70 text-white px-3 py-1 rounded-full text-sm backdrop-blur-sm">
                        12:34
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow cursor-pointer relative group">
                        <img src="https://picsum.photos/id/21/400/225" alt="NexusOS AI 助手演示" class="w-full h-48 object-cover group-hover:brightness-110 transition-all">
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <button class="w-12 h-12 rounded-full bg-primary/90 text-white flex items-center justify-center">
                                <i class="fa fa-play text-lg ml-0.5"></i>
                            </button>
                        </div>
                        <div class="p-4 bg-white">
                            <h3 class="font-semibold mb-1">AI 助手功能详解</h3>
                            <p class="text-sm text-dark/60 mb-2">5:28</p>
                            <div class="flex items-center text-xs text-dark/50">
                                <i class="fa fa-eye mr-1"></i> 12.4k 次观看
                            </div>
                        </div>
                    </div>
                    <div class="rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow cursor-pointer relative group">
                        <img src="https://picsum.photos/id/22/400/225" alt="NexusOS 多设备同步" class="w-full h-48 object-cover group-hover:brightness-110 transition-all">
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <button class="w-12 h-12 rounded-full bg-primary/90 text-white flex items-center justify-center">
                                <i class="fa fa-play text-lg ml-0.5"></i>
                            </button>
                        </div>
                        <div class="p-4 bg-white">
                            <h3 class="font-semibold mb-1">多设备同步体验</h3>
                            <p class="text-sm text-dark/60 mb-2">8:15</p>
                            <div class="flex items-center text-xs text-dark/50">
                                <i class="fa fa-eye mr-1"></i> 8.7k 次观看
                            </div>
                        </div>
                    </div>
                    <div class="rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow cursor-pointer relative group">
                        <img src="https://picsum.photos/id/23/400/225" alt="NexusOS 安全功能" class="w-full h-48 object-cover group-hover:brightness-110 transition-all">
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <button class="w-12 h-12 rounded-full bg-primary/90 text-white flex items-center justify-center">
                                <i class="fa fa-play text-lg ml-0.5"></i>
                            </button>
                        </div>
                        <div class="p-4 bg-white">
                            <h3 class="font-semibold mb-1">安全防护机制解析</h3>
                            <p class="text-sm text-dark/60 mb-2">6:42</p>
                            <div class="flex items-center text-xs text-dark/50">
                                <i class="fa fa-eye mr-1"></i> 6.3k 次观看
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 6. 软件动态资讯 -->
        <section id="news" class="py-20 bg-light">
            <div class="container mx-auto px-4">
                <div class="text-center max-w-3xl mx-auto mb-16">
                    <span class="inline-block px-3 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">最新动态</span>
                    <h2 class="text-3xl md:text-4xl font-bold mb-6">了解 NexusOS 的最新资讯</h2>
                    <p class="text-dark/70 text-lg">及时获取软件更新、活动预告和技术文章</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <!-- 资讯1 -->
                    <article class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
                        <img src="https://picsum.photos/id/28/600/400" alt="NexusOS 5.0 版本发布" class="w-full h-48 object-cover">
                        <div class="p-6">
                            <div class="flex items-center text-sm text-dark/50 mb-3">
                                <span class="flex items-center mr-4"><i class="fa fa-calendar-o mr-1"></i> 2024-05-15</span>
                                <span class="flex items-center"><i class="fa fa-folder-o mr-1"></i> 版本更新</span>
                            </div>
                            <h3 class="text-xl font-bold mb-3">NexusOS 5.0 正式发布，带来全新AI体验</h3>
                            <p class="text-dark/70 mb-4">最新版本引入了升级的AI助手，性能提升30%，新增10+实用功能，带来更智能的操作体验...</p>
                            <a href="#" class="text-primary font-medium hover:underline inline-flex items-center">
                                阅读更多 <i class="fa fa-angle-right ml-1"></i>
                            </a>
                        </div>
                    </article>

                    <!-- 资讯2 -->
                    <article class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
                        <img src="https://picsum.photos/id/29/600/400" alt="NexusOS 开发者大会" class="w-full h-48 object-cover">
                        <div class="p-6">
                            <div class="flex items-center text-sm text-dark/50 mb-3">
                                <span class="flex items-center mr-4"><i class="fa fa-calendar-o mr-1"></i> 2024-05-02</span>
                                <span class="flex items-center"><i class="fa fa-folder-o mr-1"></i> 活动预告</span>
                            </div>
                            <h3 class="text-xl font-bold mb-3">2024 NexusOS 开发者大会将于6月召开</h3>
                            <p class="text-dark/70 mb-4">本年度开发者大会将展示NexusOS生态系统的最新进展，提供技术 workshops 和专属开发者资源...</p>
                            <a href="#" class="text-primary font-medium hover:underline inline-flex items-center">
                                阅读更多 <i class="fa fa-angle-right ml-1"></i>
                            </a>
                        </div>
                    </article>

                    <!-- 资讯3 -->
                    <article class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
                        <img src="https://picsum.photos/id/30/600/400" alt="NexusOS 企业解决方案" class="w-full h-48 object-cover">
                        <div class="p-6">
                            <div class="flex items-center text-sm text-dark/50 mb-3">
                                <span class="flex items-center mr-4"><i class="fa fa-calendar-o mr-1"></i> 2024-04-20</span>
                                <span class="flex items-center"><i class="fa fa-folder-o mr-1"></i> 案例研究</span>
                            </div>
                            <h3 class="text-xl font-bold mb-3">全球500强企业如何使用NexusOS提升效率</h3>
                            <p class="text-dark/70 mb-4">案例分析：某跨国企业部署NexusOS后，团队协作效率提升47%，IT维护成本降低32%...</p>
                            <a href="#" class="text-primary font-medium hover:underline inline-flex items-center">
                                阅读更多 <i class="fa fa-angle-right ml-1"></i>
                            </a>
                        </div>
                    </article>
                </div>

                <div class="text-center mt-12">
                    <a href="#" class="inline-flex items-center text-primary font-medium hover:underline">
                        查看全部资讯 <i class="fa fa-long-arrow-right ml-2"></i>
                    </a>
                </div>
            </div>
        </section>

        <!-- 7. 注册 -->
        <section id="register" class="py-20 bg-gradient-to-br from-primary to-secondary text-white">
            <div class="container mx-auto px-4">
                <div class="max-w-4xl mx-auto">
                    <div class="text-center mb-12">
                        <span class="inline-block px-3 py-1 bg-white/20 text-white rounded-full text-sm font-medium mb-4">立即加入</span>
                        <h2 class="text-3xl md:text-4xl font-bold mb-6">注册 NexusOS 账号</h2>
                        <p class="text-white/80 text-lg max-w-2xl mx-auto">创建账号，体验完整功能，获取专属服务和更新通知</p>
                    </div>

                    <div class="bg-white rounded-2xl shadow-xl p-8 text-dark max-w-2xl mx-auto">
                        <form>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                                <div>
                                    <label for="firstName" class="block text-sm font-medium text-dark/70 mb-1">姓名</label>
                                    <input type="text" id="firstName" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-colors" placeholder="请输入您的姓名">
                                </div>
                                <div>
                                    <label for="company" class="block text-sm font-medium text-dark/70 mb-1">公司/组织</label>
                                    <input type="text" id="company" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-colors" placeholder="请输入公司或组织名称">
                                </div>
                            </div>
                            <div class="mb-6">
                                <label for="email" class="block text-sm font-medium text-dark/70 mb-1">电子邮箱</label>
                                <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-colors" placeholder="your@email.com">
                            </div>
                            <div class="mb-6">
                                <label for="password" class="block text-sm font-medium text-dark/70 mb-1">设置密码</label>
                                <input type="password" id="password" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-colors" placeholder="至少8位字符，包含字母和数字">
                            </div>
                            <div class="mb-8">
                                <label class="flex items-start">
                                    <input type="checkbox" class="mt-1 mr-3">
                                    <span class="text-sm text-dark/70">我已阅读并同意<a href="#" class="text-primary hover:underline">服务条款</a>和<a href="#" class="text-primary hover:underline">隐私政策</a></span>
                                </label>
                            </div>
                            <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-colors shadow-lg shadow-primary/20">
                                创建免费账号
                            </button>
                            <p class="text-center text-sm text-dark/60 mt-4">
                                已有账号？<a href="#" class="text-primary hover:underline">立即登录</a>
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </section>

        <!-- 8. 社区 -->
        <section id="community" class="py-20 bg-white">
            <div class="container mx-auto px-4">
                <div class="text-center max-w-3xl mx-auto mb-16">
                    <span class="inline-block px-3 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">用户社区</span>
                    <h2 class="text-3xl md:text-4xl font-bold mb-6">加入 NexusOS 社区</h2>
                    <p class="text-dark/70 text-lg">与全球用户交流经验，分享技巧，共同成长</p>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
                    <div class="bg-light rounded-2xl p-8 text-center card-hover">
                        <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center text-primary text-2xl mx-auto mb-6">
                            <i class="fa fa-comments"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">论坛讨论</h3>
                        <p class="text-dark/70 mb-6">在官方论坛提问、分享经验和解决方案，获得社区和官方团队的支持</p>
                        <a href="#" class="inline-block text-primary font-medium hover:underline">
                            访问论坛 <i class="fa fa-external-link ml-1"></i>
                        </a>
                    </div>
                    <div class="bg-light rounded-2xl p-8 text-center card-hover">
                        <div class="w-16 h-16 rounded-full bg-secondary/10 flex items-center justify-center text-secondary text-2xl mx-auto mb-6">
                            <i class="fa fa-users"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">用户群组</h3>
                        <p class="text-dark/70 mb-6">加入地区或行业用户群组，参与线下活动，拓展人脉资源</p>
                        <a href="#" class="inline-block text-secondary font-medium hover:underline">
                            查看群组 <i class="fa fa-external-link ml-1"></i>
                        </a>
                    </div>
                    <div class="bg-light rounded-2xl p-8 text-center card-hover">
                        <div class="w-16 h-16 rounded-full bg-accent/10 flex items-center justify-center text-accent text-2xl mx-auto mb-6">
                            <i class="fa fa-code"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">开发者社区</h3>
                        <p class="text-dark/70 mb-6">参与开源项目，贡献代码，开发插件，打造更丰富的生态系统</p>
                        <a href="#" class="inline-block text-accent font-medium hover:underline">
                            贡献代码 <i class="fa fa-external-link ml-1"></i>
                        </a>
                    </div>
                </div>

                <!-- 社区活跃用户 -->
                <div class="bg-light rounded-2xl p-8">
                    <h3 class="text-xl font-bold mb-6 text-center">社区活跃用户</h3>
                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
                        <div class="text-center">
                            <img src="https://picsum.photos/id/64/100/100" alt="社区用户头像" class="w-16 h-16 rounded-full mx-auto mb-3 border-2 border-white shadow-sm">
                            <h4 class="font-medium text-sm">张小明</h4>
                            <p class="text-xs text-dark/60">解决方案专家</p>
                        </div>
                        <div class="text-center">
                            <img src="https://picsum.photos/id/65/100/100" alt="社区用户头像" class="w-16 h-16 rounded-full mx-auto mb-3 border-2 border-white shadow-sm">
                            <h4 class="font-medium text-sm">李华</h4>
                            <p class="text-xs text-dark/60">开发者</p>
                        </div>
                        <div class="text-center">
                            <img src="https://picsum.photos/id/66/100/100" alt="社区用户头像" class="w-16 h-16 rounded-full mx-auto mb-3 border-2 border-white shadow-sm">
                            <h4 class="font-medium text-sm">王芳</h4>
                            <p class="text-xs text-dark/60">产品经理</p>
                        </div>
                        <div class="text-center">
                            <img src="https://picsum.photos/id/67/100/100" alt="社区用户头像" class="w-16 h-16 rounded-full mx-auto mb-3 border-2 border-white shadow-sm">
                            <h4 class="font-medium text-sm">赵强</h4>
                            <p class="text-xs text-dark/60">IT 顾问</p>
                        </div>
                        <div class="text-center">
                            <img src="https://picsum.photos/id/68/100/100" alt="社区用户头像" class="w-16 h-16 rounded-full mx-auto mb-3 border-2 border-white shadow-sm">
                            <h4 class="font-medium text-sm">陈静</h4>
                            <p class="text-xs text-dark/60">设计师</p>
                        </div>
                        <div class="text-center">
                            <img src="https://picsum.photos/id/69/100/100" alt="社区用户头像" class="w-16 h-16 rounded-full mx-auto mb-3 border-2 border-white shadow-sm">
                            <h4 class="font-medium text-sm">刘强</h4>
                            <p class="text-xs text-dark/60">技术支持</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 9. 相关软件 -->
        <section id="related-software" class="py-20 bg-light">
            <div class="container mx-auto px-4">
                <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-12">
                    <div>
                        <span class="inline-block px-3 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">相关推荐</span>
                        <h2 class="text-3xl font-bold">你可能也会喜欢</h2>
                    </div>
                    <a href="#" class="text-primary hover:underline font-medium mt-4 sm:mt-0">
                        查看全部 <i class="fa fa-angle-right ml-1"></i>
                    </a>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                    <!-- 相关软件1 -->
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
                        <img src="https://picsum.photos/id/40/400/250" alt="DocSmart 文档处理软件" class="w-full h-48 object-cover">
                        <div class="p-5">
                            <h3 class="font-semibold text-lg mb-2">DocSmart</h3>
                            <p class="text-dark/70 text-sm mb-3">智能文档处理工具，支持OCR识别和格式转换</p>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <i class="fa fa-star star-active text-xs"></i>
                                    <i class="fa fa-star star-active text-xs"></i>
                                    <i class="fa fa-star star-active text-xs"></i>
                                    <i class="fa fa-star star-active text-xs"></i>
                                    <i class="fa fa-star-o text-xs"></i>
                                    <span class="ml-1 text-xs text-dark/60">4.0</span>
                                </div>
                                <a href="#" class="text-primary text-sm font-medium">了解详情</a>
                            </div>
                        </div>
                    </div>

                    <!-- 相关软件2 -->
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
                        <img src="https://picsum.photos/id/41/400/250" alt="DataViz 数据可视化工具" class="w-full h-48 object-cover">
                        <div class="p-5">
                            <h3 class="font-semibold text-lg mb-2">DataViz</h3>
                            <p class="text-dark/70 text-sm mb-3">专业数据可视化工具，支持多种图表类型</p>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <i class="fa fa-star star-active text-xs"></i>
                                    <i class="fa fa-star star-active text-xs"></i>
                                    <i class="fa fa-star star-active text-xs"></i>
                                    <i class="fa fa-star star-active text-xs"></i>
                                    <i class="fa fa-star-half-o star-active text-xs"></i>
                                    <span class="ml-1 text-xs text-dark/60">4.5</span>
                                </div>
                                <a href="#" class="text-primary text-sm font-medium">了解详情</a>
                            </div>
                        </div>
                    </div>

                    <!-- 相关软件3 -->
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
                        <img src="https://picsum.photos/id/42/400/250" alt="SecureVault 安全存储" class="w-full h-48 object-cover">
                        <div class="p-5">
                            <h3 class="font-semibold text-lg mb-2">SecureVault</h3>
                            <p class="text-dark/70 text-sm mb-3">企业级安全存储解决方案，端到端加密</p>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <i class="fa fa-star star-active text-xs"></i>
                                    <i class="fa fa-star star-active text-xs"></i>
                                    <i class="fa fa-star star-active text-xs"></i>
                                    <i class="fa fa-star star-active text-xs"></i>
                                    <i class="fa fa-star star-active text-xs"></i>
                                    <span class="ml-1 text-xs text-dark/60">4.9</span>
                                </div>
                                <a href="#" class="text-primary text-sm font-medium">了解详情</a>
                            </div>
                        </div>
                    </div>

                    <!-- 相关软件4 -->
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
                        <img src="https://picsum.photos/id/43/400/250" alt="TeamSync 团队协作" class="w-full h-48 object-cover">
                        <div class="p-5">
                            <h3 class="font-semibold text-lg mb-2">TeamSync</h3>
                            <p class="text-dark/70 text-sm mb-3">专注团队沟通与协作，集成多种办公工具</p>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <i class="fa fa-star star-active text-xs"></i>
                                    <i class="fa fa-star star-active text-xs"></i>
                                    <i class="fa fa-star star-active text-xs"></i>
                                    <i class="fa fa-star-o text-xs"></i>
                                    <i class="fa fa-star-o text-xs"></i>
                                    <span class="ml-1 text-xs text-dark/60">3.2</span>
                                </div>
                                <a href="#" class="text-primary text-sm font-medium">了解详情</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 10. 相关标签 -->
        <section id="related-tags" class="py-12 bg-white">
            <div class="container mx-auto px-4">
                <h2 class="text-2xl font-bold mb-6">热门标签</h2>
                <div class="flex flex-wrap gap-3">
                    <a href="#" class="bg-light hover:bg-primary/10 text-dark hover:text-primary px-4 py-2 rounded-full text-sm font-medium transition-colors">
                        人工智能
                    </a>
                    <a href="#" class="bg-light hover:bg-primary/10 text-dark hover:text-primary px-4 py-2 rounded-full text-sm font-medium transition-colors">
                        智能办公
                    </a>
                    <a href="#" class="bg-light hover:bg-primary/10 text-dark hover:text-primary px-4 py-2 rounded-full text-sm font-medium transition-colors">
                        效率工具
                    </a>
                    <a href="#" class="bg-light hover:bg-primary/10 text-dark hover:text-primary px-4 py-2 rounded-full text-sm font-medium transition-colors">
                        团队协作
                    </a>
                    <a href="#" class="bg-light hover:bg-primary/10 text-dark hover:text-primary px-4 py-2 rounded-full text-sm font-medium transition-colors">
                        数据安全
                    </a>
                    <a href="#" class="bg-light hover:bg-primary/10 text-dark hover:text-primary px-4 py-2 rounded-full text-sm font-medium transition-colors">
                        多设备同步
                    </a>
                    <a href="#" class="bg-light hover:bg-primary/10 text-dark hover:text-primary px-4 py-2 rounded-full text-sm font-medium transition-colors">
                        系统优化
                    </a>
                    <a href="#" class="bg-light hover:bg-primary/10 text-dark hover:text-primary px-4 py-2 rounded-full text-sm font-medium transition-colors">
                        开发者工具
                    </a>
                    <a href="#" class="bg-light hover:bg-primary/10 text-dark hover:text-primary px-4 py-2 rounded-full text-sm font-medium transition-colors">
                        企业解决方案
                    </a>
                    <a href="#" class="bg-light hover:bg-primary/10 text-dark hover:text-primary px-4 py-2 rounded-full text-sm font-medium transition-colors">
                        开源软件
                    </a>
                    <a href="#" class="bg-light hover:bg-primary/10 text-dark hover:text-primary px-4 py-2 rounded-full text-sm font-medium transition-colors">
                        自动化工作流
                    </a>
                    <a href="#" class="bg-light hover:bg-primary/10 text-dark hover:text-primary px-4 py-2 rounded-full text-sm font-medium transition-colors">
                        个性化定制
                    </a>
                </div>
            </div>
        </section>

        <!-- 11. 用户评论 -->
        <section id="user-reviews" class="py-20 bg-light">
            <div class="container mx-auto px-4">
                <div class="text-center max-w-3xl mx-auto mb-16">
                    <span class="inline-block px-3 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">用户反馈</span>
                    <h2 class="text-3xl md:text-4xl font-bold mb-6">听听用户怎么说</h2>
                    <p class="text-dark/70 text-lg">来自全球用户的真实评价和使用体验</p>
                </div>

                <div class="flex flex-col md:flex-row items-center justify-center gap-12 mb-16">
                    <div class="text-center">
                        <div class="text-6xl font-bold bg-gradient-to-r from-primary to-secondary text-gradient mb-2">4.8</div>
                        <div class="flex justify-center mb-4">
                            <i class="fa fa-star star-active text-xl"></i>
                            <i class="fa fa-star star-active text-xl"></i>
                            <i class="fa fa-star star-active text-xl"></i>
                            <i class="fa fa-star star-active text-xl"></i>
                            <i class="fa fa-star-half-o star-active text-xl"></i>
                        </div>
                        <p class="text-dark/60">基于 2,356 条用户评价</p>
                    </div>
                    <div class="grid grid-cols-2 gap-6 w-full max-w-md">
                        <div>
                            <div class="flex items-center mb-1">
                                <span class="text-sm mr-2">5 星</span>
                                <div class="flex-1 bg-gray-200 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 80%"></div>
                                </div>
                                <span class="text-sm ml-2 text-dark/60">80%</span>
                            </div>
                            <div class="flex items-center mb-1">
                                <span class="text-sm mr-2">4 星</span>
                                <div class="flex-1 bg-gray-200 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 14%"></div>
                                </div>
                                <span class="text-sm ml-2 text-dark/60">14%</span>
                            </div>
                            <div class="flex items-center mb-1">
                                <span class="text-sm mr-2">3 星</span>
                                <div class="flex-1 bg-gray-200 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 4%"></div>
                                </div>
                                <span class="text-sm ml-2 text-dark/60">4%</span>
                            </div>
                            <div class="flex items-center mb-1">
                                <span class="text-sm mr-2">2 星</span>
                                <div class="flex-1 bg-gray-200 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 1%"></div>
                                </div>
                                <span class="text-sm ml-2 text-dark/60">1%</span>
                            </div>
                            <div class="flex items-center">
                                <span class="text-sm mr-2">1 星</span>
                                <div class="flex-1 bg-gray-200 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 1%"></div>
                                </div>
                                <span class="text-sm ml-2 text-dark/60">1%</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 评论筛选 -->
                <div class="flex flex-wrap gap-3 mb-10 justify-center">
                    <button class="bg-primary text-white px-4 py-2 rounded-full text-sm font-medium">全部评论</button>
                    <button class="bg-white text-dark px-4 py-2 rounded-full text-sm hover:bg-gray-100 transition-colors">5星 (1,892)</button>
                    <button class="bg-white text-dark px-4 py-2 rounded-full text-sm hover:bg-gray-100 transition-colors">4星 (326)</button>
                    <button class="bg-white text-dark px-4 py-2 rounded-full text-sm hover:bg-gray-100 transition-colors">3星 (98)</button>
                    <button class="bg-white text-dark px-4 py-2 rounded-full text-sm hover:bg-gray-100 transition-colors">2星 (24)</button>
                    <button class="bg-white text-dark px-4 py-2 rounded-full text-sm hover:bg-gray-100 transition-colors">1星 (16)</button>
                </div>

                <!-- 评论列表 -->
                <div class="space-y-8 max-w-4xl mx-auto">
                    <!-- 评论1 -->
                    <div class="bg-white p-6 rounded-xl shadow-sm">
                        <div class="flex items-start justify-between mb-4">
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="w-12 h-12 rounded-full mr-4">
                                <div>
                                    <h4 class="font-semibold">张小明</h4>
                                    <div class="flex items-center text-sm text-dark/60">
                                        <i class="fa fa-calendar-o mr-1"></i>
                                        <span>2024-05-10</span>
                                        <span class="mx-2">•</span>
                                        <span>使用 6 个月</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex">
                                <i class="fa fa-star star-active"></i>
                                <i class="fa fa-star star-active"></i>
                                <i class="fa fa-star star-active"></i>
                                <i class="fa fa-star star-active"></i>
                                <i class="fa fa-star star-active"></i>
                            </div>
                        </div>
                        <p class="text-dark/80 mb-4">
                            作为一家初创公司的创始人，NexusOS 极大地提升了我们团队的协作效率。AI 助手功能非常实用，能自动整理会议纪要并生成任务清单，多设备同步让我随时随地都能处理工作。系统稳定性也很好，半年来几乎没有出现过崩溃情况。
                        </p>
                        <div class="flex items-center justify-between text-sm">
                            <div class="flex items-center space-x-4">
                                <button class="flex items-center text-dark/60 hover:text-primary transition-colors">
                                    <i class="fa fa-thumbs-up mr-1"></i> 有用 (42)
                                </button>
                                <button class="flex items-center text-dark/60 hover:text-primary transition-colors">
                                    <i class="fa fa-comment-o mr-1"></i> 回复
                                </button>
                            </div>
                            <span class="text-dark/50">行业：科技创业</span>
                        </div>
                    </div>

                    <!-- 评论2 -->
                    <div class="bg-white p-6 rounded-xl shadow-sm">
                        <div class="flex items-start justify-between mb-4">
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/65/100/100" alt="用户头像" class="w-12 h-12 rounded-full mr-4">
                                <div>
                                    <h4 class="font-semibold">李华</h4>
                                    <div class="flex items-center text-sm text-dark/60">
                                        <i class="fa fa-calendar-o mr-1"></i>
                                        <span>2024-04-28</span>
                                        <span class="mx-2">•</span>
                                        <span>使用 1 年</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex">
                                <i class="fa fa-star star-active"></i>
                                <i class="fa fa-star star-active"></i>
                                <i class="fa fa-star star-active"></i>
                                <i class="fa fa-star star-active"></i>
                                <i class="fa fa-star-o"></i>
                            </div>
                        </div>
                        <p class="text-dark/80 mb-4">
                            整体体验非常好，特别是数据安全和隐私保护方面做得很到位，这对于我们金融行业来说至关重要。唯一的小缺点是某些第三方软件兼容性还不够完美，希望后续版本能改进。客服响应很及时，有问题都能得到快速解决。
                        </p>
                        <div class="flex items-center justify-between text-sm">
                            <div class="flex items-center space-x-4">
                                <button class="flex items-center text-dark/60 hover:text-primary transition-colors">
                                    <i class="fa fa-thumbs-up mr-1"></i> 有用 (28)
                                </button>
                                <button class="flex items-center text-dark/60 hover:text-primary transition-colors">
                                    <i class="fa fa-comment-o mr-1"></i> 回复
                                </button>
                            </div>
                            <span class="text-dark/50">行业：金融服务</span>
                        </div>
                    </div>

                    <!-- 评论3 -->
                    <div class="bg-white p-6 rounded-xl shadow-sm">
                        <div class="flex items-start justify-between mb-4">
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/66/100/100" alt="用户头像" class="w-12 h-12 rounded-full mr-4">
                                <div>
                                    <h4 class="font-semibold">王芳</h4>
                                    <div class="flex items-center text-sm text-dark/60">
                                        <i class="fa fa-calendar-o mr-1"></i>
                                        <span>2024-04-15</span>
                                        <span class="mx-2">•</span>
                                        <span>使用 3 个月</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex">
                                <i class="fa fa-star star-active"></i>
                                <i class="fa fa-star star-active"></i>
                                <i class="fa fa-star star-active"></i>
                                <i class="fa fa-star star-active"></i>
                                <i class="fa fa-star-half-o star-active"></i>
                            </div>
                        </div>
                        <p class="text-dark/80 mb-4">
                            作为设计师，我非常喜欢 NexusOS 的视觉设计和个性化选项，界面美观且流畅。多任务处理能力很强，同时运行多个设计软件也不会卡顿。协作功能让我能和开发团队无缝对接，大大减少了沟通成本。
                        </p>
                        <div class="flex items-center justify-between text-sm">
                            <div class="flex items-center space-x-4">
                                <button class="flex items-center text-dark/60 hover:text-primary transition-colors">
                                    <i class="fa fa-thumbs-up mr-1"></i> 有用 (35)
                                </button>
                                <button class="flex items-center text-dark/60 hover:text-primary transition-colors">
                                    <i class="fa fa-comment-o mr-1"></i> 回复
                                </button>
                            </div>
                            <span class="text-dark/50">行业：创意设计</span>
                        </div>
                    </div>
                </div>

                <div class="text-center mt-12">
                    <a href="#" class="inline-flex items-center bg-white text-primary font-medium px-6 py-3 rounded-lg shadow-sm hover:shadow-md transition-shadow">
                        查看更多评论 <i class="fa fa-angle-down ml-2"></i>
                    </a>
                </div>
            </div>
        </section>

        <!-- 12. 下载入口 -->
        <section id="download" class="py-20 bg-gradient-to-br from-dark to-dark/90 text-white">
            <div class="container mx-auto px-4">
                <div class="text-center max-w-3xl mx-auto mb-16">
                    <span class="inline-block px-3 py-1 bg-white/20 text-white rounded-full text-sm font-medium mb-4">立即体验</span>
                    <h2 class="text-3xl md:text-4xl font-bold mb-6">下载 NexusOS</h2>
                    <p class="text-white/80 text-lg">选择适合你设备的版本，开始智能办公之旅</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
                    <!-- 下载选项1 -->
                    <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-8 text-center card-hover">
                        <div class="w-16 h-16 rounded-full bg-white/20 flex items-center justify-center text-white text-2xl mx-auto mb-6">
                            <i class="fa fa-windows"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">Windows</h3>
                        <p class="text-white/70 text-sm mb-6">支持 Windows 10/11 64位</p>
                        <a href="#" class="inline-block bg-white text-dark hover:bg-white/90 font-medium py-3 px-6 rounded-lg transition-colors w-full">
                            <i class="fa fa-download mr-2"></i>下载 (v5.0.1)
                        </a>
                        <p class="text-white/50 text-xs mt-4">文件大小: 865MB</p>
                    </div>

                    <!-- 下载选项2 -->
                    <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-8 text-center card-hover">
                        <div class="w-16 h-16 rounded-full bg-white/20 flex items-center justify-center text-white text-2xl mx-auto mb-6">
                            <i class="fa fa-apple"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">macOS</h3>
                        <p class="text-white/70 text-sm mb-6">支持 macOS 10.15 及以上</p>
                        <a href="#" class="inline-block bg-white text-dark hover:bg-white/90 font-medium py-3 px-6 rounded-lg transition-colors w-full">
                            <i class="fa fa-download mr-2"></i>下载 (v5.0.1)
                        </a>
                        <p class="text-white/50 text-xs mt-4">文件大小: 782MB</p>
                    </div>

                    <!-- 下载选项3 -->
                    <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-8 text-center card-hover">
                        <div class="w-16 h-16 rounded-full bg-white/20 flex items-center justify-center text-white text-2xl mx-auto mb-6">
                            <i class="fa fa-mobile"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">移动版</h3>
                        <p class="text-white/70 text-sm mb-6">支持 iOS 和 Android</p>
                        <a href="#" class="inline-block bg-white text-dark hover:bg-white/90 font-medium py-3 px-6 rounded-lg transition-colors w-full">
                            <i class="fa fa-external-link mr-2"></i>应用商店
                        </a>
                        <p class="text-white/50 text-xs mt-4">iOS 13+ / Android 8.0+</p>
                    </div>
                </div>

                <div class="mt-16 bg-white/10 backdrop-blur-sm rounded-xl p-6 max-w-4xl mx-auto">
                    <h3 class="text-xl font-bold mb-4 text-center">历史版本下载</h3>
                    <div class="overflow-x-auto">
                        <table class="w-full text-left">
                            <thead>
                                <tr class="border-b border-white/20">
                                    <th class="pb-4">版本号</th>
                                    <th class="pb-4">发布日期</th>
                                    <th class="pb-4">更新内容</th>
                                    <th class="pb-4 text-right">下载</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="border-b border-white/10">
                                    <td class="py-4">v4.9.2</td>
                                    <td class="py-4">2024-03-15</td>
                                    <td class="py-4 text-white/80">性能优化和bug修复</td>
                                    <td class="py-4 text-right">
                                        <a href="#" class="text-white/80 hover:text-white">下载</a>
                                    </td>
                                </tr>
                                <tr class="border-b border-white/10">
                                    <td class="py-4">v4.9.0</td>
                                    <td class="py-4">2024-02-08</td>
                                    <td class="py-4 text-white/80">新增AI助手功能</td>
                                    <td class="py-4 text-right">
                                        <a href="#" class="text-white/80 hover:text-white">下载</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="py-4">v4.8.1</td>
                                    <td class="py-4">2024-01-05</td>
                                    <td class="py-4 text-white/80">安全更新和兼容性提升</td>
                                    <td class="py-4 text-right">
                                        <a href="#" class="text-white/80 hover:text-white">下载</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="bg-dark text-white pt-16 pb-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
                <div>
                    <div class="flex items-center space-x-2 mb-6">
                        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
                            <i class="fa fa-cube text-white text-xl"></i>
                        </div>
                        <span class="text-xl font-bold">NexusOS</span>
                    </div>
                    <p class="text-white/60 mb-6">
                        重新定义智能操作系统体验，让工作更高效、更简单、更愉悦。
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-facebook"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-linkedin"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-github"></i>
                        </a>
                    </div>
                </div>
                <div>
                    <h4 class="text-lg font-semibold mb-6">产品</h4>
                    <ul class="space-y-3">
                        <li><a href="#features" class="text-white/60 hover:text-white transition-colors">功能介绍</a></li>
                        <li><a href="#download" class="text-white/60 hover:text-white transition-colors">下载中心</a></li>
                        <li><a href="#" class="text-white/60 hover:text-white transition-colors">定价方案</a></li>
                        <li><a href="#" class="text-white/60 hover:text-white transition-colors">更新日志</a></li>
                        <li><a href="#" class="text-white/60 hover:text-white transition-colors">路线图</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-semibold mb-6">资源</h4>
                    <ul class="space-y-3">
                        <li><a href="#news" class="text-white/60 hover:text-white transition-colors">最新资讯</a></li>
                        <li><a href="#" class="text-white/60 hover:text-white transition-colors">帮助文档</a></li>
                        <li><a href="#" class="text-white/60 hover:text-white transition-colors">教程视频</a></li>
                        <li><a href="#community" class="text-white/60 hover:text-white transition-colors">社区论坛</a></li>
                        <li><a href="#" class="text-white/60 hover:text-white transition-colors">开发者中心</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-semibold mb-6">公司</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-white/60 hover:text-white transition-colors">关于我们</a></li>
                        <li><a href="#" class="text-white/60 hover:text-white transition-colors">联系我们</a></li>
                        <li><a href="#" class="text-white/60 hover:text-white transition-colors">招贤纳士</a></li>
                        <li><a href="#" class="text-white/60 hover:text-white transition-colors">服务条款</a></li>
                        <li><a href="#" class="text-white/60 hover:text-white transition-colors">隐私政策</a></li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-white/10 pt-8">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-white/50 text-sm mb-4 md:mb-0">
                        &copy; 2024 NexusOS Technologies. 保留所有权利。
                    </p>
                    <div class="flex space-x-6">
                        <a href="#" class="text-white/50 hover:text-white text-sm transition-colors">服务条款</a>
                        <a href="#" class="text-white/50 hover:text-white text-sm transition-colors">隐私政策</a>
                        <a href="#" class="text-white/50 hover:text-white text-sm transition-colors">Cookie 设置</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 滚动进度指示器
        window.addEventListener('scroll', function() {
            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            const scrolled = (winScroll / height) * 100;
            document.getElementById("scrollIndicator").style.width = scrolled + "%";
        });

        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('py-2');
                header.classList.remove('py-4');
                header.classList.add('shadow');
            } else {
                header.classList.add('py-4');
                header.classList.remove('py-2');
                header.classList.remove('shadow');
            }
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

        // 移动端菜单切换
        const menuBtn = document.querySelector('button.md\\:hidden');
        if (menuBtn) {
            menuBtn.addEventListener('click', function() {
                const nav = document.querySelector('header nav');
                nav.classList.toggle('hidden');
                nav.classList.toggle('flex');
                nav.classList.toggle('flex-col');
                nav.classList.toggle('absolute');
                nav.classList.toggle('top-16');
                nav.classList.toggle('left-0');
                nav.classList.toggle('right-0');
                nav.classList.toggle('bg-white');
                nav.classList.toggle('p-4');
                nav.classList.toggle('shadow-lg');
                nav.classList.toggle('z-50');
            });
        }
    </script>
</body>
</html>
